<template>
	<view class="container" :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-colorP" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">{{navTitle}}</block>
		</cu-custom>
		<view class="shop-content">
			<view class="top-item" v-for="(item,index) in ordeList" :key='index' :data-url="'/pages/personals/chargeOrderDetail?id='+item.id"
			 bindtap="nav">
				<view class="top-info">
					<image :src="type=='sc'?item.shop_image:'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/meituan-lo.png'"></image>
					<view>
						<view class="name">
							<view>
								<view>{{item.b_name}}</view>
							</view>
							<view>{{item.pay_time}}</view>
						</view>
						<view class="product">
							<view>{{item.order_name}}</view>
							<view><text>¥</text> {{item.total_price}}</view>
						</view>
					</view>
					<view class="absolute">{{item.status==2?'待核销':(item.status==3?'已核销':'')}}</view>
				</view>
			</view>
		</view>

		<view style="background: #fff">
			<tui-divider width="60%" :gradual="true" v-if="noMore">没有更多了</tui-divider>
			<no-content :showType="'orders'" v-if='noContentShow' :tips="'暂时还没有订单哦，赶紧投入使用吧~'"></no-content>
		</view>
	</view>
</template>

<script>
	import noContent from "./component/noContent.vue"
	import tuiDivider from './component/divider.vue'
	export default {
		components: {
			noContent,
			tuiDivider
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				ordeList: [],
				page: 1,
				noContentShow: false,
				noMore: false,
				apiUrl: '',
				navTitle: '',
				type:''
			}
		},
		onLoad(options) {
			var that = this
			

			that.type = options.type
			switch (options.type) {
				case 'mt':
					that.apiUrl = '/MtOrder/getOrderByBid'
					that.navTitle = '美团订单'
					break
				case 'sc':
					that.apiUrl = '/OnlineOrder/getOrderByBid'
					that.navTitle = '商城订单'
					break
			}
			this.getOrder()
		},
		onReachBottom() {
			this.getOrder()
		},
		methods: {
			nav(e) {
				console.log(e)
			},
			getOrder() {
				var that = this
				this.$request({
					url: that.apiUrl,
					data: {
						page: that.page
					},
					success: res => {
						if (res.data.status == 1) {
							var showList = that.ordeList
							if (res.data.data.totalNum == 0) {
								that.noContentShow = true
								return
							}
							if (res.data.data.pageCount == 0 && that.page == 1) {
								that.noMore = true
							}
							res.data.data.data.forEach(item => {
								showList.push(item)
							})
							that.page++
							that.ordeList = showList
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	page {
		background: #fff;
	}
</style>

<style scoped>
	/* 商城 */
	.shop-content {
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		background: #f3f3f3;
	}

	.shop-content .top-item:last-child {
		margin-bottom: 0 !important;
	}

	.top-item {
		width: 100%;
		padding-left: 20rpx;
		box-sizing: border-box;
		background: #fff;
		margin-bottom: 10rpx;
		overflow: hidden;
		padding-top: 10rpx;
	}

	.top-info {
		display: flex;
		height: 180rpx;
		box-sizing: border-box;
		position: relative;
	}

	.absolute {
		position: absolute;
		top: 10rpx;
		right: 25rpx;
		padding: 0 0 0 20rpx;
		line-height: 30rpx;
		text-align: center;
		font-size: 22rpx;
		/* border: solid 1rpx #3080E8; */
		color: #3080E8;
		border-radius: 8rpx;
	}

	.top-info image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		background: #ccc;
		margin-top: 15rpx;
	}

	.top-info>view {
		flex: 1;
	}

	.top-info>view>view {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.top-info .name {
		flex: 1;
		border-bottom: solid 1rpx #f2f2f2;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-around;
		padding-bottom: 10rpx;
	}

	.top-info .product {
		height: 80rpx;
		display: flex;
		align-items: center;
		color: #666;
		justify-content: space-between;
		padding-right: 20rpx;
		box-sizing: border-box;
	}

	.top-info .product>view:nth-child(1) {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		font-size: 28rpx;
	}

	.top-info .product>view:nth-child(2) {
		color: #333;
		font-size: 30rpx;
		font-weight: bold;
	}

	.top-info .product>view:nth-child(2) text {
		font-size: 24rpx;
	}

	.top-info .name view {
		display: flex;
		align-items: center;
		/* width: 100%; */
	}

	.top-info .name view:nth-child(2) {
		font-size: 26rpx;
		color: #999;
	}

	.top-info .name image {
		width: 40rpx;
		height: 50rpx;
		background: #fff;
		margin-top: 0;
	}

	.top-info .name image {
		width: 40rpx;
		height: 50rpx;
		background: #fff;
	}

	.top-info .name view:nth-child(1) {
		flex: 1;
	}

	.top-info .name view:nth-child(1)>view {
		max-width: 450rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}

	.use-btn {
		height: 88rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0 20rpx;
		border-top: solid 1rpx #f2f2f2;
	}

	.use-btn text {
		width: 150rpx;
		height: 50rpx;
		border: solid 1rpx #3080e8;
		border-radius: 8rpx;
		text-align: center;
		line-height: 50rpx;
		color: #3080e8;
	}
</style>
